<script setup>
import { ref, reactive } from 'vue'
import MyChar from './myChar.vue'
import MyCharEarth from './myCharEarth.vue'
const config1 = reactive({
    data: [
        {
        name: '南阳',
        value: 167
        },
        {
        name: '周口',
        value: 67
        },
        {
        name: '漯河',
        value: 123
        },
        {
        name: '郑州',
        value: 55
        },
        {
        name: '西峡',
        value: 98
        }
    ],
    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
    unit: '万元',
    labelNum: 8,
})
const config2 = reactive({
    header: ['列1', '列2', '列3'],
    data: [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3'],
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
})
const config3 = reactive({
    data: [
        {
        name: '杭州',
        value: 98,
        },
        {
        name: '金华',
        value: 150,
        },
        {
        name: '宁波',
        value: 62,
        },
        {
        name: '太原',
        value: 54,
        }
    ]
})

</script>
<template>
    <div style="flex:0 1 25%">
        <dv-border-box-2 style="width: 100%; height: 300px;">
            <dv-active-ring-chart :config="config3" style="width:100%;height:300px"/>
        </dv-border-box-2>
        <dv-border-box-10 style="width: 100%; height: 300px;">
            <MyCharEarth />
        </dv-border-box-10>
    </div>
    <div style="flex:0 1 50%">
        <dv-border-box-8 style="width: 100%; height: 600px;">
            <MyChar />
        </dv-border-box-8>
    </div>
    <div style="flex:0 1 25%">
        <dv-border-box-10 style="width: 100%; height: 200px;">
            <dv-capsule-chart :config="config1" style="width:25rem;height:100%" />
        </dv-border-box-10>
        <dv-border-box-10 style="width: 100%; height: 200px;">
            <dv-scroll-board :config="config2" style="width:500px;height:100%" />
        </dv-border-box-10>
        <dv-border-box-10 style="width: 100%; height: 200px;">
            <dv-capsule-chart :config="config1" style="width:25rem;height:100%" />
        </dv-border-box-10>
    </div>
</template>
<style lang="less" scoped>
</style>
